<template>
  <div class="profile-wrapper">
    <a-card class="profile-card" :bordered="false">
      <div class="profile-header">
        <a-avatar :size="72" style="background-color: #1890ff; font-size: 32px;">
          {{ userInitial }}
        </a-avatar>
        <div class="profile-title">{{ userInfo.username }}</div>
        <div class="profile-email">{{ userInfo.email }}</div>
      </div>
      <a-divider style="margin: 18px 0 24px 0;" />
      <a-descriptions bordered :column="1" size="middle">
        <a-descriptions-item label="用户名">{{ userInfo.username }}</a-descriptions-item>
        <a-descriptions-item label="邮箱">{{ userInfo.email }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">{{ userInfo.id }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <div class="refresh-button">
      <a-button type="primary" @click="fetchUserInfo">刷新信息</a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'

const userInfo = ref({
  username: '',
  email: '',
  id: ''
})

const userInitial = computed(() => {
  return userInfo.value.username?.charAt(0).toUpperCase() || 'U'
})

async function fetchUserInfo() {
  try {
    const token = localStorage.getItem('accessToken')
    const res = await fetch('http://192.168.0.22:7044/api/module/Cust/Info', {
      headers: {
        'Authorization': token ? `Bearer ${token}` : ''
      }
    })
    const data = await res.json()
    if (data.success && data.data) {
      userInfo.value = data.data
    } else {
      message.error(data.message || '获取用户信息失败')
    }
  } catch (e) {
    message.error('网络请求失败')
  }
}

onMounted(fetchUserInfo)
</script>

<style scoped>
.profile-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 480px;
}
.profile-card {
  width: 420px;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(24, 144, 255, 0.08), 0 1.5px 6px rgba(0,0,0,0.04);
}
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
}
.profile-title {
  font-size: 22px;
  font-weight: 600;
  margin-top: 16px;
  color: #222;
}
.profile-email {
  color: #888;
  font-size: 15px;
  margin-top: 4px;
}
.refresh-button {
  margin-top: 24px;
  text-align: center;
}
</style>